<template>
  <div class="addAsthmaTemplate-container">
    <el-form label-width="100px" ref="formRef" :rules="rules" :model="form">
      <section class="info-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <xm-f-radio
              quick
              prop="type"
              v-model="form.type"
              label="版本"
              :options="templateTypes"
            ></xm-f-radio>
          </el-col>
          <el-col :span="8">
            <xm-f-intput
              quick
              prop="project"
              v-model="form.project"
              label="治法:"
            ></xm-f-intput>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄:" prop="ageRule">
              <el-input
                v-model.number="form.startAge"
                style="width: 45%"
                placeholder="请输入起始年龄"
              />
              至
              <el-input
                v-model.number="form.endAge"
                style="width: 45%"
                placeholder="请输入结束年龄"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <xm-f-intput
              type="textarea"
              v-model="form.remark"
              label="模板说明:"
              quick
              prop="remark"
            ></xm-f-intput>
          </el-col>
        </el-row>
      </section>
      <section class="info-content">
        <action-plan
          :type="contentType"
          :is-action="false"
          ref="acitonPlanRef"
        ></action-plan>
      </section>
    </el-form>
    <section class="info-content foot">
      <el-button type="primary" @click="toSave">保存</el-button>
      <el-button @click="toBack">取消</el-button>
    </section>
  </div>
</template>
<script>
  import emr from '@/hooks/emr.vue'
  import { toRefs, computed, ref, onBeforeMount } from 'vue'
  // @/views/reception/components/actionPlan
  import actionPlan from '@/views/reception/components/actionPlan'
  import { useRouter, useRoute } from 'vue-router'
  import { addTemplate, loadTemplate } from '@/api/modules/actionPlan'
  import common from '@/utils/common'
  export default {
    name: 'addCNAsthmaTemplate',
    components: { actionPlan },
    setup() {
      const form = ref({})
      const contentType = computed(() => {
        return 3
      })

      const ageValidate = (rule, value, callback) => {
        if (
          (!form.value.startAge && form.value.startAge !== 0) ||
          !form.value.endAge
        ) {
          callback(new Error('请填写完起始年龄'))
        } else {
          callback()
        }
      }
      const weightValidate = (rule, value, callback) => {
        if (
          (!form.value.startWeight && form.value.startWeight !== 0) ||
          !form.value.endWeight
        ) {
          callback(new Error('请填写完起始体重'))
        } else {
          callback()
        }
      }
      const ageInputsRule = [{ required: true, validator: ageValidate }]
      const weightInputsRule = [{ required: true, validator: weightValidate }]
      const rules = {
        actionPlanType: [
          { required: true, message: '请输入患者姓名', trigger: 'change' },
        ],
        ageRule: ageInputsRule,
        weightRule: weightInputsRule,
      }
      const acitonPlanRef = ref(null)
      const formRef = ref(null)
      const toSave = async function () {
        formRef.value.validate((valid) => {
          if (valid) {
            common.XmLoading(true)
            addTemplate({
              ...form.value,
              content: acitonPlanRef.value.getActionDatas(),
              templateType: 3,
              status: 2,
              id: route.query.id,
            })
              .then((res) => {
                common.XmLoading()
                common.XmMessage(0, res.message)
                toBack()
              })
              .catch(() => common.XmLoading())
          }
        })
      }
      const toLoad = async function (id) {
        const res = await loadTemplate({ id })
        const formKeys = [
          'startAge',
          'endAge',
          'startWeight',
          'endWeight',
          'actionPlanType',
          'remark',
          'type',
          'content',
          'project',
        ]
        formKeys.map((item) => {
          form.value[item] = res.data[item]
        })
        acitonPlanRef.value.initEmr(
          res.data.content,
          form.value.actionPlanValue
        )
      }
      const changeType = function () {
        acitonPlanRef.value.clear()
      }
      const router = useRouter()
      const toBack = function () {
        router.go(-1)
      }

      const route = useRoute()
      onBeforeMount(() => {
        if (route.query.id) toLoad(route.query.id)
      })
      return {
        form,
        toSave,
        toBack,
        contentType,
        acitonPlanRef,
        changeType,
        formRef,
        rules,
        ...toRefs(emr()),
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .addAsthmaTemplate-container {
    .info-content {
      margin: 22px;
      background-color: white;
      padding: 15px;
    }
    .foot {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
